// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

import { fetchItem } from './api'

export function createStore () {
  return new Vuex.Store({
    state: {
      items: {},
      message: ''
    },
    actions: {

      message ({ commit }) {
        console.log('message actions')
        setTimeout(() => {
          commit('message')
        }, 1200)
      },

      fetchItem ({ commit }, id) {
        console.log('setItem actions')
        // let item = fetchItem(id)
        return fetchItem(id).then(item => {
          console.log('item', item);
          commit('setItem', { id, item })
        })
      }
    },
    mutations: {

      message (state: any) {
        console.log('message mutations')
        state.message = 'client端渲染剩余数据......'
      },

      setItem (state: any, { id, item }) {
        console.log('setItem mutations')
        Vue.set(state.items, id, item)
        console.log('state.items', state.items);
      }
    }
  })
}
